<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta charset="utf-8" name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Welcome to HTUDB!</title>
    <link rel="stylesheet" href="/media/css/index.css">
</head>

<body>
    <header>
        <div class="navigator">
            <h1>HDUDB</h1>
            <div class="options">
                <span class="burger">⏳</span>
                <span class="search-button">🔍</span>
                <a class="add-lesson" href="{% url 'lesson:createlesson' %}">➕</a>
            </div>
        </div>
        <div class="filter-menu" style="display: none;">
            <p>老师</p>
            <p>课程类型</p>
            <p>课程评价</p>
        </div>
        <form class="search-field" style="display: none;" action="{% url 'lesson:search' %}" method="POST">
            {% csrf_token %}
            <input name="keywords" type="text" required>
            <input type="submit" value="搜索课程和评论">
        </form>
    </header>
    <main>
        {% for lesson in lessons %}
        <div class="lesson-card">
            <h2><a href="{% url 'lesson:lesson' lesson.id %}">{{lesson.name}}</a></h2>
            <p class="tag">{{ lesson.teacher }}</p>
            <p class="quote-symbol">“</p>
            <div class="lesson-discription">
                {{ lesson.bestcomment.comment }}
            </div>
            <p class="comment-tag">{{ lesson.bestcomment.name }} {{ lesson.bestcomment.term }}</p>
        </div>
        {% endfor %}
    </main>
    <script async>
        const burger = document.querySelector('.burger')
        const searchButton = document.querySelector('.search-button');
        const searchField = document.querySelector('.search-field');
        let filter_menu = document.querySelector('.filter-menu')
        burger.onclick = function (e) {
            if (filter_menu.style.display === 'block') {
                filter_menu.style.display = 'none';
            } else {
                filter_menu.style.display = 'block';
            }
        };
        searchButton.onclick = function (e) {
            if (searchField.style.display === 'none') {
                searchField.style.display = 'block';
            } else {
                searchField.style.display = 'none';
            }
        };
        filter_menu.onclick = function(e){
            alert("嘿嘿，这个功能还没做 :p")
        }
    </script>
</body>

</html>